<template>
  <el-container id="app">
    <!-- Conditionally render header and sidebar based on the current route -->
    <el-header v-if="!isLoginPage && !isHomePage" class="header">
      <Navbar />
    </el-header>
    <el-container v-if="!isLoginPage && !isHomePage">
      <el-aside width="200px" class="sidebar">
        <Sidebar />
      </el-aside>
      <el-container>
        <el-main class="content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- Display login page or home page directly -->
    <router-view v-else />
  </el-container>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import Navbar from '../components/Navbar.vue';
import Sidebar from '../components/Sidebar.vue';

// Determine if the current route is the login page or home page
const route = useRoute();
const isLoginPage = computed(() => route.path === '/login');
const isHomePage = computed(() => route.path === '/home');
</script>

<style>
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  background-color: #00274d;
  color: white;
  padding: 0 20px;
}

.sidebar {
  background-color: #00274d;
}

.content {
  padding: 20px;
  overflow: auto;
}

.footer {
  background-color: #00274d;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
